{extend name="common/base" }

{block name="style"}
<style type="text/css">
    .login-page {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, #fff), linear-gradient(70deg, #e0f1ff 32%, #fffae3);
    }

    .login-box {
        width: 450px;
        max-width: 90%;
        margin: 0 auto;
        padding-top: 50vh;
        transform: translateY(-25%);
    }

    .login-box .login-box-msg {
        margin: 15px;
        font-weight: bold;
        font-size: 40px;
    }

    .login-box .form-group {
        margin-bottom: 20px;
    }

    .login-box .form-group .form-control {
        height: 40px;
    }

    .login-box .form-group .form-control-feedback {
        height: 40px;
        line-height: 40px;
    }

    .login-box .verify-code-img {
        height: 40px;
    }

    .login-box .verify-code-text {
        font-size: 15px;
        padding-top: 12px;
        padding-right: 8px;
        cursor: pointer;
    }

    .login-box .row-space {
        width: 100%;
        height: 4px;
    }
</style>
{/block}

{block name="body"}
<body class="hold-transition login-page">
<div class="login-box" id="login-box">

    <div class="login-box-body">
        <h3 class="login-box-msg">用户登录</h3>
        <form action="{$login_url}" method="post" class="ajax-form">
            <div class="form-group has-feedback">
                <input type="text" name="user_name" class="form-control" placeholder="用户名" v-model="user_name" required/>
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="user_password" class="form-control" placeholder="密码"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" name="verify_code" class="form-control" placeholder="验证码" maxlength="4"/>
                <span class="glyphicon glyphicon-eye-open form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <p>
                    <img class="verify-code-img" :src="captcha_src"/>
                    <a class="pull-right verify-code-text" @click="changeCaptchaSrc">看不清？换一张</a>
                </p>
            </div>
            <div class="row-space"></div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="pretty p-default">
                        <input type="checkbox" v-model="is_remember"/>
                        <div class="state p-primary">
                            <label>记住用户名</label>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <a class="btn btn-primary btn-block ajax-post" target-form=".ajax-form">登 录</a>
                </div>
            </div>
        </form>
    </div>

</div>
</body>
{/block}

{block name="script"}
<script>
    var captcha_src = '{$captcha_src}';
    $(function () {
        require(['js-cookie'], function (Cookies) {
            new Vue({
                el: '#login-box',
                data: {
                    user_name: '',
                    is_remember: false,
                    captcha_src: ''
                },
                created: function () {
                    this.initData();
                    this.changeCaptchaSrc();
                },
                watch: {
                    user_name: function (value) {
                        if (value) {
                            Cookies.set('user_name', value, {expires: 30});
                        }
                        else {
                            Cookies.remove('user_name');
                        }
                    },
                    is_remember: function (value) {
                        if (value) {
                            Cookies.set('is_remember', value, {expires: 30});
                        }
                        else {
                            Cookies.remove('is_remember');
                        }
                    }
                },
                methods: {
                    initData: function () {
                        this.is_remember = Cookies.get('is_remember');
                        if (this.is_remember) {
                            this.user_name = Cookies.get('user_name');
                            this.user_name = this.user_name !== 'undefined' ? this.user_name : '';
                        }
                        else {
                            Cookies.remove('user_name');
                        }
                    },
                    changeCaptchaSrc: function () {
                        return this.captcha_src = captcha_src + '?_=' + Math.random();
                    }
                }
            });
        });
    });
</script>
{/block}